/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.animate-enter {
  -webkit-transition: 1s linear all;
  /* Chrome */
  transition: 1s linear all;
  opacity: 0; }

.animate-enter.animate-enter-active {
  opacity: 1; }

html, body {
  height: 100%;
  width: 100%;
  font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }

ul {
  padding: 0; }

div {
  margin: 0px;
  padding: 0px; }

img {
  border: none; }

a {
  color: #444444;
  text-decoration: underline; }

p {
  font-size: 1.4rem;
  color: #999999; }

h1 {
  font-size: 6.4rem; }

h2 {
  font-size: 2.4rem; }

h3 {
  font-size: 2rem;
  color: #464646;
  text-align: center; }

.inline {
  display: inline-block; }

.bordered {
  border: 0.1rem solid #dddddd;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.bordered.no-top {
  border-top: 0; }

.bordered.no-bottom {
  border-bottom: 0; }

.bordered.no-left {
  border-left: 0; }

.bordered.no-right {
  border-right: 0; }

.bordered-item-button {
  position: absolute;
  top: 0;
  right: 1.5rem;
  height: 5rem;
  width: 5rem;
  border: 0.1rem solid #dddddd;
  padding: 1rem; }

.img-container {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 8rem;
  width: 8rem;
  overflow: hidden;
  padding: 0; }
  .img-container img {
    height: 8rem;
    width: auto;
    max-width: 100%; }
  .img-container.profile {
    border: 0.2rem solid #dddddd; }
  .img-container.md {
    margin: 1.5rem auto; }
  .img-container.sm {
    height: 4rem;
    width: 4rem; }
    .img-container.sm img {
      height: 4rem; }
  .img-container.xs {
    height: 3rem;
    width: 3rem; }
    .img-container.xs img {
      height: 3rem; }

#loaderDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: black;
  opacity: .5; }

.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  /* -1 * image width / 2 */
  margin-top: -32px;
  /* -1 * image height / 2 */
  display: block; }

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none; }

input::-webkit-clear-button {
  display: none; }

.row {
  margin-bottom: 3rem; }

.row.no-bottom-margin {
  margin-bottom: 0; }

.row.no-side-margin {
  margin-left: 0;
  margin-right: 0; }

.form-group label {
  font-weight: normal;
  color: #c8c8c8; }

.button {
  cursor: pointer;
  color: white;
  text-transform: uppercase;
  display: table;
  margin: 0 auto;
  height: 6rem;
  font-size: 1.8rem; }

.button > div {
  display: table-cell;
  vertical-align: middle; }

.button-green {
  background-color: #dada00; }

.button-blue {
  background-color: #3b5998; }

.button-lightGray {
  background-color: #f6f6f6;
  color: #c8c8c8; }

.button-orange {
  background-color: #ff7a4d; }

.button.full {
  width: 100%; }

.button.big {
  width: 46rem; }

.button.medium {
  width: 22rem; }

.yellow {
  color: #ffc000; }

.darkYellow {
  color: #979714; }

.blue {
  color: #3b5998; }

.lightBlue {
  color: #899bc1; }

.gray {
  color: #c8c8c8; }

.darkGray {
  color: #464646; }

.lightGray {
  color: #f6f6f6; }

.green {
  color: #dada00; }

.orange {
  color: #ff7a4d; }

.darkOrange {
  color: #ad5e43; }

#header {
  height: 5rem;
  width: 100%;
  display: table;
  text-align: center; }

#header.offline {
  background-color: #222222; }

#header.online {
  background-color: #3d545d; }

#header > div {
  display: table-cell;
  vertical-align: middle;
  width: 29%; }

#header > div:nth-child(2) {
  width: 42%; }

#header #title {
  color: white;
  font-size: 2rem;
  cursor: pointer; }

#header .headerButtons {
  color: #C8C8C8; }

#header .headerButtons > div {
  font-size: 1.6rem;
  cursor: pointer; }

#header #leftHeaderButtons > div {
  float: right; }

#header #leftHeaderButtons div:first-child {
  margin-left: 1.3rem; }

#header #rightHeaderButtons > div {
  float: left; }

#header #rightHeaderButtons div:last-child {
  margin-left: 3rem; }

#header #headerNewMatch {
  line-height: 3rem; }

#subHeader {
  width: 100%;
  padding: 3.4rem 0;
  text-align: center;
  color: #fff;
  background-image: url("../images/sub_header_back.jpg");
  background-repeat: repeat-x;
  background-position: top left; }

#subHeader .container-fluid {
  width: 94rem; }

#subHeader h1, #subHeader h2, #subHeader p {
  color: #fff; }

.matchesList {
  width: 94rem;
  margin: 0 auto; }

.modal-dialog-center {
  margin-top: 10%; }

.modal-dialog-center.h630 {
  margin-top: 1%; }

/* Create Match Modal */
#newMatchModal .modal-dialog, #newMatchModal .modal-content {
  width: 94rem;
  height: 34rem;
  text-align: center; }
#newMatchModal .modal-content {
  width: 91rem; }
#newMatchModal select {
  width: 25rem;
  margin: 0 auto; }
#newMatchModal #timeSelectors {
  overflow: hidden;
  width: 25rem;
  margin: 0 auto; }
#newMatchModal #time input:first-child {
  width: 14rem;
  margin: 0 auto;
  float: left; }
#newMatchModal #time input:last-child {
  width: 10rem;
  margin: 0 auto;
  float: right; }
#newMatchModal p {
  margin-top: 2.4rem; }
#newMatchModal .modal-body .row:last-child {
  margin: 0px;
  padding-top: 0.7rem; }

/* End Create Match Modal */
#home {
  background-image: url("../images/home_back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center; }

#home h1, #home h2 {
  color: #fff;
  text-align: center; }

#newMatch {
  background-color: #FEFEFE;
  width: 94rem;
  margin: 4rem auto 0;
  overflow: hidden;
  padding: 3.6rem 2rem 2rem; }

#newMatch > div {
  float: left;
  width: 33.3%; }

#newMatchButton {
  margin: 4rem auto; }

#home select {
  width: 25rem;
  margin: 0 auto; }

#home #timeSelectors {
  overflow: hidden;
  width: 25rem;
  margin: 0 auto; }

#home #time input:first-child {
  width: 14rem;
  margin: 0 auto;
  float: left; }

#home #time input:last-child {
  width: 10rem;
  margin: 0 auto;
  float: right; }

#home p {
  margin-top: 2.4rem; }

#registerButton {
  font-weight: bold;
  width: 44rem;
  margin: 0 auto;
  height: 5rem; }

#registerModal .modal-dialog, #registerModal .modal-content {
  width: 46rem;
  height: 24.8rem; }

#newFieldModal .modal-dialog, #newFieldModal .modal-content {
  width: 46rem;
  height: 39.8rem;
  text-align: center; }
  #newFieldModal .modal-dialog h1, #newFieldModal .modal-dialog h2, #newFieldModal .modal-content h1, #newFieldModal .modal-content h2 {
    color: #464646;
    text-align: center; }

#groupName {
  text-align: left; }

#group {
  width: 91rem;
  margin: 6rem auto 0; }

/* New Users Modal */
/*#newUserGroupModal .modal-dialog, #newUserGroupModal .modal-content{
	width: 62rem; 
	height: 62rem;
	text-align: center;
}

#newUserGroupModal .friends-list{
	height: 36rem;
	overflow: auto;
}*/
#newUserGroupModal {
  text-align: center; }
  #newUserGroupModal #newGroupButton {
    margin-right: 0; }
  #newUserGroupModal .friends-list {
    height: 36rem;
    overflow: auto;
    background-color: #f6f6f6; }
    #newUserGroupModal .friends-list .group, #newUserGroupModal .friends-list .friend {
      background-color: white;
      border: 0.1rem solid #dddddd;
      display: table;
      width: 100%;
      padding: 0 1.5rem;
      cursor: pointer;
      margin-bottom: 1.5rem; }
      #newUserGroupModal .friends-list .group div, #newUserGroupModal .friends-list .friend div {
        display: table-cell;
        margin: 0 auto;
        vertical-align: middle; }
      #newUserGroupModal .friends-list .group .img-container img, #newUserGroupModal .friends-list .friend .img-container img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden; }
    #newUserGroupModal .friends-list .group {
      height: 8rem; }
    #newUserGroupModal .friends-list .friend {
      height: 6rem; }
    #newUserGroupModal .friends-list .group.selected, #newUserGroupModal .friends-list .friend.selected {
      border: 0.1rem solid #dbdb01;
      background-color: #f8f8cc; }

/* End New Users Modal */
/* Group Image Modal */
#groupImageModal .modal-dialog, #groupImageModal .modal-content {
  width: 46rem;
  height: 40rem;
  text-align: center; }
#groupImageModal .thumbnail {
  max-width: 150px;
  max-height: 150px;
  line-height: 20px;
  margin: 0 auto 5px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0px; }
  #groupImageModal .thumbnail img {
    height: 150px;
    width: auto; }

/* End Group Image Modal */
#groups {
  width: 91rem;
  margin: 6rem auto 0; }

#newGroupModal .modal-dialog, #newGroupModal .modal-content {
  width: 46rem;
  height: 26.8rem;
  text-align: center; }

.group-list {
  margin-top: 5rem; }

#matches {
  width: 91rem;
  margin: 6rem auto 0; }

.matchesList .thumbnail {
  border-radius: 0px;
  overflow: hidden;
  margin-top: 3rem;
  padding: 0px; }
.matchesList li {
  cursor: pointer; }
.matchesList li > div {
  float: left;
  width: 23%;
  text-align: center;
  padding: 4rem; }
  .matchesList li > div:last-child {
    width: 8%;
    padding: 0rem;
    display: table;
    float: right;
    border-right: 0px;
    border-top: 0px; }
.matchesList .action {
  padding: 1.8rem;
  cursor: pointer; }
  .matchesList .action.captain {
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 2.4rem; }
  .matchesList .action.play {
    border-color: #dada00; }
    .matchesList .action.play.ticked {
      border-color: #979714;
      background-color: #dada00;
      color: #979714; }
  .matchesList .action.noPlay.ticked {
    border-color: #ad5e43;
    background-color: #ff7a4d;
    color: #ad5e43; }

#match {
  width: 95rem;
  margin: 6rem auto 0; }

#matchShare {
  margin-top: 1.8rem;
  width: 54rem; }

#matchShare p {
  margin: 1rem auto; }

#matchShare #shareUrl {
  overflow: hidden;
  text-overflow: ellipsis; }

#fieldScheme {
  background-image: url("../images/field.jpg");
  background-size: cover;
  width: 46rem;
  height: 52rem;
  position: relative; }

#playersMissing > div {
  min-height: 5.3rem; }

.team {
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem;
  background-color: white;
  color: black;
  border: 0.1rem solid #dddddd;
  margin-bottom: 0.8rem;
  min-height: 5.3rem;
  line-height: 5.3rem; }

.team.colored {
  border: 0; }

.player-item {
  margin-bottom: 0.8rem;
  min-height: 6.3rem;
  border: 0.1rem solid #dddddd;
  padding: 1rem 0.8rem; }
  .player-item .img-container {
    padding-left: 0px; }
  .player-item > div:last-child {
    line-height: 4rem; }
  .player-item.empty {
    border-style: dashed;
    cursor: pointer; }

.player-badge {
  border: 0.1rem solid #dddddd;
  border-width: 2px;
  position: absolute; }
  .player-badge.empty {
    border-style: dashed;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    opacity: 0.5; }

#fieldData {
  margin: 0 0.1rem;
  padding: 1.5rem 2.5rem; }

#fbCommentBox {
  padding: 2.5rem; }

#addPlayerModal, #invitePlayersModal {
  text-align: center; }

#invitePlayersModal #invitePlayersButton, #editMatchModal #updateMatchButton {
  margin-right: 0; }

#map_canvas {
  height: 26rem; }

#playersMissing {
  overflow: hidden; }
  #playersMissing > div {
    line-height: 4;
    padding: 0;
    height: 100%; }
  #playersMissing .bar {
    background-color: #f6f6f6;
    text-align: center; }
    #playersMissing .bar .table {
      display: table;
      width: 100%;
      height: 5.6rem;
      margin-bottom: 0;
      line-height: 1; }
    #playersMissing .bar .table-cell {
      display: table-cell;
      vertical-align: middle;
      margin: 0 auto; }
    #playersMissing .bar .back-bar {
      color: white;
      width: 22rem;
      height: 3rem;
      background-color: #999999;
      display: inline-block;
      line-height: 231%;
      border-bottom-left-radius: 1.5rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem;
      border-top-right-radius: 1.5rem;
      overflow: hidden;
      position: relative; }
      #playersMissing .bar .back-bar .progress-bar {
        background-color: #FFBF00;
        width: 0; }
      #playersMissing .bar .back-bar .progress-bar-after {
        width: 0;
        height: 0;
        border-top: 8rem solid #FFBF00;
        border-right: 3rem solid transparent;
        position: absolute; }
      #playersMissing .bar .back-bar .text {
        width: 100%; }
      #playersMissing .bar .back-bar > div {
        position: absolute; }
  #playersMissing .shirt {
    background-color: #000;
    background-image: url("../images/shirt.png");
    background-size: cover;
    background-position: center; }
  #playersMissing .shirt-options {
    position: absolute;
    width: 22.8rem;
    height: 16.8rem;
    top: 5.8rem;
    z-index: 99;
    cursor: pointer; }
    #playersMissing .shirt-options.left {
      left: 3rem; }
    #playersMissing .shirt-options.right {
      right: 0rem; }
    #playersMissing .shirt-options .shirt-option {
      background-image: url("../images/shirt.png");
      background-size: cover;
      background-position: center;
      width: 7.6rem;
      height: 5.6rem; }

#matchShare .shareLink {
  cursor: pointer; }
#matchShare #shareUrl input {
  margin: 1rem auto;
  width: 100%;
  border: none;
  color: #999999; }

/* Edit Match Modal */
#editMatchModal .modal-dialog, #editMatchModal .modal-content {
  width: 94rem;
  height: 34rem;
  text-align: center; }
#editMatchModal .modal-content {
  width: 91rem; }
#editMatchModal select {
  width: 25rem;
  margin: 0 auto; }
#editMatchModal #timeSelectors {
  overflow: hidden;
  width: 25rem;
  margin: 0 auto; }
#editMatchModal #time input:first-child {
  width: 14rem;
  margin: 0 auto;
  float: left; }
#editMatchModal #time input:last-child {
  width: 10rem;
  margin: 0 auto;
  float: right; }
#editMatchModal p {
  margin-top: 2.4rem; }
#editMatchModal .modal-body .row:last-child {
  margin: 0px;
  padding-top: 0.7rem; }

/* End Edit Match Modal */
/* Invite Players Modal */
#invitePlayersModal .friends-list {
  height: 36rem;
  overflow: auto;
  background-color: #f6f6f6; }
  #invitePlayersModal .friends-list .group, #invitePlayersModal .friends-list .friend {
    background-color: white;
    border: 0.1rem solid #dddddd;
    display: table;
    width: 100%;
    padding: 0 1.5rem;
    cursor: pointer;
    margin-bottom: 1.5rem; }
    #invitePlayersModal .friends-list .group div, #invitePlayersModal .friends-list .friend div {
      display: table-cell;
      margin: 0 auto;
      vertical-align: middle; }
    #invitePlayersModal .friends-list .group .img-container img, #invitePlayersModal .friends-list .friend .img-container img {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden; }
  #invitePlayersModal .friends-list .group {
    height: 8rem; }
  #invitePlayersModal .friends-list .friend {
    height: 6rem; }
  #invitePlayersModal .friends-list .group.selected, #invitePlayersModal .friends-list .friend.selected {
    border: 0.1rem solid #dbdb01;
    background-color: #f8f8cc; }

/* End Invite Players Modal */
#userName {
  text-align: left; }

#profile {
  width: 91rem;
  margin: 6rem auto 0; }
